<style lang="less">
  #div_create_or_update_truck_load_message_dialog {
    .f-w80 {
      width: 80%;
    }
  }
</style>
<template>
  <div id="div_create_or_update_truck_load_message_dialog">
    <el-dialog :visible.sync="isShow" width="40%">
      <el-form :model="truckLoadMessageForm" ref="truckLoadMessageForm" label-width="80px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="始发地">
                <el-input class="f-w80" :disabled="true"
                          v-model="truckLoadMessageForm.startAddrName">
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="目的地">
                <el-input class="f-w80" :disabled="true"
                          v-model="truckLoadMessageForm.endAddrName">
                </el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="车型">
                <el-input class="f-w80" :disabled="true" v-model="truckLoadMessageForm.trucksTypeName"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="车长">
                <el-input class="f-w80" :disabled="true" v-model="truckLoadMessageForm.trucksLengthName"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="重量">
                <el-input class="f-w80" :disabled="true" v-model="truckLoadMessageForm.weight">
                  <template slot="append">吨</template>
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="体积">
                <el-input class="f-w80" :disabled="true" v-model="truckLoadMessageForm.volume">
                  <template slot="append">方</template>
                </el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="货物类型">
                <el-input class="f-w80" :disabled="true" v-model="truckLoadMessageForm.cargoTypeName">
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="装卸方式">
                <el-input class="f-w80" :disabled="true" v-model="truckLoadMessageForm.assembleTypeName">
                </el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="数量">
                <el-input class="f-w80" :disabled="true" v-model="truckLoadMessageForm.number">
                  <template slot="append">辆</template>
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="有效时间">
                <el-input class="f-w80" :disabled="true" v-model="truckLoadMessageForm.range">
                </el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          整车车价设置（原价*折扣=优惠价）
          <el-col :span="24">
            <div class="grid-content">
              <el-input class="f-wa" :disabled="true" v-model="truckLoadMessageForm.originalPrice">
              </el-input>
              *
              <el-input class="f-wa" :disabled="true" v-model="truckLoadMessageForm.discount">
              </el-input>
              =
              <el-input class="f-wa" :disabled="true" v-model="truckLoadMessageForm.discountPrice">
              </el-input>
              元
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { resetForm } from '../../lib/util.js';
import { getTruckLoadMessage } from '../../api/truck-load/TruckLoadMessage.js';

export default {
  name: 'TruckLoadMessageDetailDialog',
  props: {
    time: {},
    type: {}
  },
  watch: {
    time (val) {
      resetForm(this.$refs.truckLoadMessageForm, this.truckLoadMessageForm);
      this.isShow = true;
    },
    type (val) {
      getTruckLoadMessage(val.id).then((res) => {
        this.truckLoadMessageForm = res.data;
        this.truckLoadMessageForm.range = this.truckLoadMessageForm.startValidTime.substring(11, 16) + '-' + this.truckLoadMessageForm.endValidTime.substring(11, 16);
      });
    }
  },
  data () {
    return {
      truckLoadMessageForm: {
        startAddressIdArray: [],
        endAddressIdArray: [],
        startProvinceId: null,
        startProvinceName: null,
        startCityId: null,
        startCityName: null,
        startCountyId: null,
        startCountyName: null,
        endProvinceId: null,
        endProvinceName: null,
        endCityId: null,
        endCityName: null,
        endCountyId: null,
        endCountyName: null,
        trucksTypeId: null,
        trucksTypeName: null,
        trucksLengthId: null,
        trucksLengthName: null,
        weight: null,
        volume: null,
        originalPrice: null,
        discount: 1,
        discountPrice: null,
        status: null,
        statusName: null,
        cargoTypeId: null,
        cargoTypeName: null,
        assembleType: null,
        assembleTypeName: null,
        number: null,
        range: null,
        startValidTime: null,
        endValidTime: null
      },
      isShow: false,
      addresses: []
    };
  },
  methods: {},
  mounted () {
  }
};
</script>
